<template>
    <div class="index">
        <!-- 头部 -->
        <van-nav-bar title="商品详情" left-arrow @click-left="$router.back()">
            <template #right>
                <van-icon name="ellipsis" />
            </template>
        </van-nav-bar>
        <!-- 商品详情 -->
        <div class="product">
            <div class="img">
                <img :src="info.goodsCoverImg" alt="">
            </div>
            <div class="title">
                {{ info.goodsName }}
            </div>
            <p class="info-p">顺丰包邮</p>
            <p class="price"> ￥{{ info.sellingPrice }}</p>
            <ul class="info_ul">
                <li>概述</li>
                <li>参数</li>
                <li>安装服务</li>
                <li class="info_li">常见问题</li>
            </ul>
            <div v-html="info.goodsDetailContent" class="info_content"></div>
            <div class="actionBar">
                <van-action-bar>
                    <van-action-bar-icon icon="chat-o" text="客服" />
                    <van-action-bar-icon icon="cart-o" text="购物车" :badge="store.cartNum"
                        @click="$router.push('/cart')" />
                    <van-action-bar-icon icon="shop-o" text="店铺" />
                    <van-action-bar-button type="warning" text="加入购物车" @click="add" />
                    <van-action-bar-button type="danger" text="立即购买" />
                </van-action-bar>
            </div>
        </div>

    </div>
</template>
<script setup>
import { onMounted, reactive } from "vue";
import { useRoute, useRouter } from "vue-router"
import { getInfoData, addCart } from "@/api/index.js"
import { showFailToast, showSuccessToast } from "vant";
import { useCart } from "@/store/cartStore.js"
let store = useCart()
let route = useRoute()
let info = reactive({})
onMounted(() => {
    getData()
})
let getData = async () => {
    let { data } = await getInfoData(route.params.productId)
    for (let key in data) {
        info[key] = data[key]
        store.getCartListAsync()
    }
}
// 点击加入购物车
let add = async () => {
    let { resultCode, message } = await addCart({
        goodsId: route.params.productId,
        goodsCount: 1
    })
    if (resultCode == 200) {
        showSuccessToast('添加成功')
        store.getCartListAsync()
    } else {
        showFailToast(message)
    }
}
</script>
<style lang="less" scoped>
.index {
    width: 100%;

    .van-nav-bar {
        width: 100%;
    }

    .product {
        width: 100%;

        .img {
            width: 100%;

            img {
                width: 100%;
                height: auto;
            }
        }

        .title {
            font-size: 0.48rem;
            text-align: left;
            color: #333;
        }

        .info-p {
            font-size: 0.37333rem;
            text-align: left;
            color: #999;
            padding: 0.13333rem 0;
        }

        .price {
            color: #f63515;
            font-size: 0.58667rem;
            text-align: left;
        }
    }

    .info_ul {
        display: flex;
        justify-content: space-between;
        align-content: center;

        li {
            flex: 1;
            padding: 0.13333rem 0;
            text-align: center;
            font-size: 0.4rem;
            border-right: 0.02667rem solid #999;
            box-sizing: border-box;
        }

        .info_li {
            border-right: none;
        }
    }

    .actionBar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-around;
        align-content: center;

        .van-action-bar {
            width: 100%;
            height: 50px;
        }
    }
}
</style>